<template>
	<div class="HumanResources">
		<transition name="mybox2">
			<div class="left" v-show="cebian_show">
				<div class="topNav"><i class="el-icon-document"></i><p>&nbsp;人力资源组织</p></div>
				<!--树状图带筛选-->
				<div class="bottomNav">
					<el-input
					  placeholder="输入关键字进行过滤"
					  v-model="filterText">
					</el-input>
					
					<el-tree
					  class="filter-tree"
					  :data="data2"
					  :props="defaultProps"
					  default-expand-all
					  :filter-node-method="filterNode"
					  ref="tree2"
					  @node-click="node_click">
					</el-tree>
				</div>
				
			</div>
		</transition>
		
		<!--中间的线-->
		<div class="line_div"></div>
		
		<div class="right">
			<div class="topNav"><i class="el-icon-news"></i><p>&nbsp;组织管理</p></div>
			
			<div class="rigth_bottom">
				<el-tabs type="border-card" >
					<el-tab-pane>
					    <span slot="label"><i class="el-icon-date"></i> 组织基本信息</span>
					    组织基本信息
					</el-tab-pane>
					<el-tab-pane label="下属组织">下属组织</el-tab-pane>
					<el-tab-pane label="组织员工">组织员工</el-tab-pane>
					<el-tab-pane label="排序迁移">排序迁移</el-tab-pane>
				</el-tabs>
				
			</div>
			
			
			<!--收缩侧边栏按钮-->
			<div class="shousuo" @click="guanbi"><i class="el-icon-caret-left"></i></div>
		</div>
		
		
	</div>
</template>

<script>
	export default{
		name:'HumanResources',
		data(){
			return{
				fileList:[],//导入表格
				dialogFormVisible2: false,//导入
				value: '',//高级搜索的下拉选择（启用状态）
				value2: '',//高级搜索的下拉选择（ERP状态）
				cebian_show:true,//控制侧边栏展开和收起
				visible2:false,//控制高级搜索显示和隐藏
				input:'',
				input1:'',//搜索的输入框
				//树状图带筛选
				filterText: '',
		        data2: [{
		          id: 1,
		          label: '铜冠有色金属集团股份有限公司',
			        children: [{
		            	id: 2,
		            	label: '铜冠信息科技有限责任公司',
			            children: [{
			              id: 9,
			              label: '研发部'
			            }, {
			              id: 10,
			              label: '财务部'
			            },{
			              id: 11,
			              label: '项目部'
			            },{
			              id: 12,
			              label: '售后部'
			            }]
		          	},{
		          		id: 3,
		          		label: '铜冠地产',
			          	children: []
			        },{
		          		id: 4,
		          		label: '安徽铜冠铜箔有限公司',
			          	children: []
			        },{
		          		id: 5,
		          		label: '铜冠电工有限公司',
			          	children: [{
			            	id: 6,
			            	label: '芜湖铜冠电工有限公司'
			          	}, {
			            	id: 7,
			            	label: '铜陵有色股份线材有限公司'
			          	}, {
			            	id: 8,
			            	label: '芜湖金奥微细漆包线有限公司'
			          	}]
			        }]
		        }],
		        defaultProps: {
		          children: 'children',
		          label: 'label'
		        },
			}
		},
		created(){
			
		},
		watch:{
			//树状图带筛选
		    filterText(val) {
		    	console.log(val)
		        this.$refs.tree2.filter(val);
		    }
		},
		methods:{
			//树状图带筛选
			filterNode(value, data){
				console.log(value, data)
		        if (!value) return true;
		        return data.label.indexOf(value) !== -1;
		   	},
		   //点击树状节点
			node_click(res){
				console.log(res)
			},
			//点击关闭侧边栏按钮
		    guanbi(){
		    	this.cebian_show=!this.cebian_show
		    },
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.HumanResources{
		width: 98%;height: 95%;padding: 10px;background: #f2f2f2;min-width: 1000px;display: flex;
		.left{
			height: 100%;width:240px;background: white;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-document{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			.bottomNav{
				padding: 10px;box-sizing: border-box;
			}
			
		}
		/*中间的线div*/
		.line_div{border-left:1px solid #ddd ;width: 1px;height: 100%;margin:0 5px;}
		
		.right{
			background:white;height:100%;width: 78%;z-index: 1;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-news{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			
			.rigth_bottom{
				margin: 10px;
				/*.table{margin-top: 20px;border: 1px solid #ddd;}*/
			}
			
			.shousuo{
				position: absolute;bottom: 10%;width: 25px;height: 50px;background: #ddd;line-height: 50px;text-align: center;cursor: pointer;color: white;
			}
			.shousuo:hover{background: #409EFF;}
		}
		
		
		
	}
	/*控制侧边栏展开和收缩动画*/
    .mybox2-leave-active,.mybox2-enter-active{
        transition:  all 1s ease; 
    }
    .mybox2-leave-active,.mybox2-enter{
        width:0px !important;
    }
    .mybox2-leave,.mybox2-enter-active{
        width:240px;
    }
</style>